<!--
 * @Author: Yang Zhang
 * @Date: 2021-11-25 21:42:34
 * @LastEditors: Yang Zhang
 * @LastEditTime: 2021-12-29 22:47:38
 * @Description: 
-->
<template>
  <div>
    <div class="topsets">
      <div class="btns">
        <div class="daysbtn" @click.stop="search(7)">Last 7 days</div>
        <div class="daysbtn" @click.stop="search(30)">Last 30 days</div>
        <div class="daysbtn" @click.stop="search(0)">All</div>
      </div>
      <div class="selects">
        <a-range-picker
          :show-time="{ format: 'HH:mm' }"
          format="YYYY-MM-DD"
          :placeholder="['Start Time', 'End Time']"
          @change="onChange"
        />
        <div class="kol-btn kol-btn-primary" @click.stop="searchSub">Submit</div>
        <div class="kol-btn kol-btn-primary" @click.stop="reset">Reset</div>
      </div>
    </div>
    <div class="tables">
      <div class="orderItem" v-for="item in orderlst" :key="item.sn">
        <div class="toptit">
          <span>Order time:{{ item.createTime }}</span>
          <span>Order id: {{ item.sn }}</span>
        </div>
        <div class="bottom">
          <div class="thumlist">
            <div class="img">
              <img :src="item.groupImages" />
            </div>
          </div>
          <div class="right">
            <div class="item">
              <div class="titNum">{{ item.memberName }}</div>
              <div class="info">Buyer name</div>
            </div>
            <div class="item centered">
              <div class="titNum">{{ item.orderStatus }}</div>
              <div class="info">Order status</div>
            </div>
            <div class="item">
              <div class="titNum">{{ item.storeCommission }}</div>
              <div class="info">Income</div>
            </div>
          </div>
        </div>
        <div class="link" @click="viewdetail(item.sn)">View detail</div>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { Dayjs } from 'dayjs';
import { reactive, toRefs, onBeforeMount, onMounted, ref } from 'vue'
import { RouteLocationRaw, useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { getbankcardlst, getOrderlst, getWallet } from '../../../api/wallet';
import router from '../../../router';
import { getStorageItem, setStorageItem } from '../../../utils/utils';
import { ICarditem } from '../../types';
interface DataProps { }
const store = useStore()
const startTime = ref('')
const endTime = ref('')
// 时间段选择插件
const onChange = (value: Dayjs[], dateString: string[]) => {
  console.log('Selected Time: ', value);
  console.log('Formatted Selected Time: ', dateString);
  startTime.value = dateString[0]
  endTime.value = dateString[1]
}

const searchSub = () => {
  const param = {
    pageSize: pageSize.value,
    pageNumber: pageNumber.value,
    startTime: startTime.value,
    endTime: endTime.value,
    searchType: searchType.value
  }
  getOrder(param)
}
const reset = () => {
  pageNumber.value = 1
  startTime.value = ''
  endTime.value = ''
  searchType.value = ''
  const param = {
    pageSize: pageSize.value,
    pageNumber: pageNumber.value,
    startTime: startTime.value,
    endTime: endTime.value,
    searchType: searchType.value
  }
  getOrder(param)
}
const pageNumber = ref(1)
const pageSize = ref(8)
const totalpages = ref(0)
const total = ref(0)
const searchType = ref('')
// 订单列表信息
const orderlst = ref<any[]>([])
const getOrder = async (data: any) => {
  const res = await getOrderlst(data)
  if (res) {
    orderlst.value = [...orderlst.value, ...res.result.records]
    total.value = res.result.total
    pageNumber.value = res.result.current
    totalpages.value = res.result.pages
  }
}
onMounted(() => {
  const page = {
    pageNumber: pageNumber.value,
    pageSize: pageSize.value
  }
  getOrder(page)
})

// 上拉加载
const scrollNum = ref(0)
const handleScroll = (e: any) => {
  //变量scrollTop是滚动条滚动时，距离顶部的距离
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  //变量windowHeight是可视区的高度
  var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
  //变量scrollHeight是滚动条的总高度
  var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  //滚动条到底部的条件
  if (scrollHeight - scrollTop - windowHeight < 200) {
    //到了这个就可以进行业务逻辑加载后台数据了
    console.log(pageNumber.value, totalpages.value)
    if (pageNumber.value < totalpages.value) {
      console.log(pageNumber.value, totalpages.value)
      pageNumber.value = pageNumber.value + 1
      const param = {
        pageNumber: pageNumber.value,
        pageSize: pageSize.value,
        searchType: searchType.value
      }
      getOrder(param)
    } else {
    }
  }
}
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

// 简便搜索
const search = (num: number) => {
  if (num === 7) {
    searchType.value = 'LAST_SEVEN'
    const param = {
      searchType: searchType.value
    }
    getOrder(param)
  } else if (num === 30) {
    searchType.value = 'LAST_THIRTY'
    const param = {
      searchType: searchType.value
    }
    getOrder(param)
  } else {
    searchType.value = 'ALL'
    const param = {
      searchType: searchType.value
    }
    getOrder(param)
  }
}

const viewdetail = (ordersn: any) => {
  router.push(`/orders/detail?sn=${ordersn}`)
}

</script>
<style lang='scss'>
.income {
  width: 1600px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
 
  .right-list {
    flex: 1;
    min-height: 1545px;
    background-color: #fff;
    border-top: 2px solid #e60044;
    padding: 8px 50px;
    .tables {
      .orderItem {
        width: 1077px;
        background-color: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        padding: 23px 24px;
        display: flex;
        flex-direction: column;
        position: relative;
        margin-bottom: 15px;
        .link {
          font-size: 18px;
          font-family: Galvji;
          font-weight: 400;
          text-decoration: underline;
          color: #e60044;
          position: absolute;
          top: 32px;
          right: 46px;
          cursor: pointer;
        }
        .toptit {
          font-size: 18px;
          font-family: Galvji;
          font-weight: bold;
          color: #000000;
          margin-bottom: 20px;
          span {
            margin-right: 20px;
          }
        }
        .bottom {
          flex: 1;
          display: flex;
          .thumlist {
            width: 100px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .img {
              width: 95px;
              height: 95px;
              img {
                width: 95px;
                height: 95px;
              }
            }
          }
          .right {
            flex: 1;
            display: flex;
            padding: 13px;
            .item {
              width: 33.3%;
              height: 95px;
              text-align: center;
              padding-top: 13px;
              .titNum {
                font-size: 22px;
                font-family: Galvji;
                font-weight: bold;
                color: #000000;
              }
              .info {
                font-size: 22px;
                font-family: Galvji;
                font-weight: normal;
                color: #000000;
              }
            }
            .centered {
              border-left: 1px solid rgba(224, 224, 224, 1);
              border-right: 1px solid rgba(224, 224, 224, 1);
            }
          }
        }
      }
    }
  }
}
</style>
